<template>
  <div>
    <!--  新建表单-->
    <changauditDesign :items="items" :formdata="formdata" @save="save" />
    <el-dialog title="修改表单项名称" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-form-item label="表单项名称">
          <el-input v-model="ruleForm.formIndexName" autocomplete="off" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="isok('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Bus from '@/utils/eventBus.js'

export default {
  name: 'Formpage',
  data() {
    return {
      items: [],
      bigidarr: [],
      id: null,
      fromid: null,
      fromidarr: [],
      formdata: {},
      ruleForm: {
        formIndexName: ''
      },
      rules: {
        formIndexName: [
          { required: true, message: '请输入表单项名称', trigger: 'blur' }
        ]
      },
      dialogFormVisible: false,
      datainfo: null
    }
  },
  computed: {
    idarr() {
      return this.$store.state.print.bigidarr
    }

  },

  watch: {
    bigidarr: {
      handler: function(val, oldval) {
        this.bigidarr = val
      }
    },
    fromidarr(val) {
      this.fromidarr = val
      this.$store.dispatch('set_item', this.fromidarr)
    }

  },
  created() {
    this.getqueryid()
    this.gitalllist()
  },

  methods: {
    isok(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$Http.saveItem({
            formIndexName: this.ruleForm.formIndexName,
            formIndexJson: JSON.stringify(this.datainfo),
            id: this.id
          }).then(res => {
            if (res.code === 200) {
              this.dialogFormVisible = false
              this.$message({
                type: 'success',
                message: '修改成功'

              })
              this.$router.push({
                path: '/assessmentguanli'
              })
            } else {
              this.$message({
                type: 'error',
                message: '修改失败'

              })
            }
          }).catch(err => {
            console.log('err', err)
          })
        } else {
          return false
        }
      })
    },

    save(data) {
      this.dialogFormVisible = true
      this.datainfo = data
      console.log(this.$store.state.print.bigidarr)
    },
    // 取所有按钮
    async gitalllist() {
      try {
        const res = await this.$Http.getbtnall()
        const valTemp = []
        const valType = []

        if (res.code === 200) {
          for (let r = 0; r < res.result.length; r++) {
            valType.push({
              type: 'assembly',
              name: res.result[r].formIndexName,
              id: res.result[r].id
            })
            valTemp.push(res.result[r].formIndexJsonObject)
          }

          for (var c = 0; c < valType.length; c++) {
            const item = {
              type: valType[c],
              data: valTemp[c]
            }
            this.items.push(item)
          }

          for (var l = 0; l < res.result.length; l++) {
            if (this.id != null) {
              if (this.id === res.result[l].id) {
                Bus.$emit('itemid', l)
              }
            } else {
              return
            }
          }
        }
      } catch (err) {
        console.log('err', err)
      }
    },
    // 获取id
    getqueryid() {
      this.id = this.$route.query.id
      this.fromid = this.$route.query.fromid
      this.ruleForm.formIndexName = this.$route.query.formIndexName
      console.log('this.fromid', this.fromid)
      if (this.fromid !== undefined) {
        this.getformids()
      }
    },
    async getformids() {
      try {
        const res = await this.$Http.frombianji(this.fromid)
        if (res.code === 200) {
          this.fromidarr = res.result.formItemIds
          this.formdata = JSON.parse(res.result.formJson)
        }
      } catch (err) {
        console.log('err', err)
      }
    }

  }
}
</script>

<style scoped>

</style>
